<template>
    <div class="express-address-map " :style="{height:mapHeight}">
        <div class="amap-page-container ">
            <el-amap :vid="'express-address' + randomNum" ref="map" :zoom="zoom" :amap-manager="amapManager" :center="mapCenter" :events="events"  :style="{height:mapHeight}" class="amap-demo">
                <el-amap-marker
                        v-for="(marker, index) in marker"
                        :position="marker.position"
                        :vid="index">
                    <img src="../../../assets/img/send.png" v-if="marker.type === 'send'"  class="icon-img">
                    <img src="../../../assets/img/Group15Copy@2x.png" v-if="marker.type === 'collect'" class="icon-img" >
                    <!--<div class="express-name">{{marker.name}}</div>-->
                </el-amap-marker>
                <el-amap-polyline
                        v-for="(line,index) in polylines"
                        :key="index"
                        :path="line.path"
                        strokeStyle="dashed">
                </el-amap-polyline>
                <el-amap-info-window
                        v-for="item in windows"
                        :position="item.position"
                        :visible="item.visible"
                        :content="item.content"
                        :events="item.events">
                </el-amap-info-window>
            </el-amap>
        </div>
    </div>
</template>


<script>
    import VueAMap from "vue-amap";
    let amapManager = new VueAMap.AMapManager();
    export default {
        props: {
            orderDetailData: {
                type: Object,
                default: ()=>{
                    return {}
                }
            },
            mapHeight:{
                type: String,
                default: '400px'
            },
        },
        data() {
            return {
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: amapManager,
                zoom: 12,
                marker: [],
                polylines: [],
                mapCenter: [116.397428, 39.90923],
                events: {},
                driverGuiJi: null,
                windows: []
            };
        },
        computed: {
            markers: function (val) {
                let self = this;
                return [
                    {
                        position:[self.orderDetailData.pick_lon,self.orderDetailData.pick_lat],
                        name: self.orderDetailData.pick_address,
                        type: 'send',  //发
                        // events: {
                        //     click() {
                        //         self.windows = [];
                        //         self.windows = [{
                        //             position: [self.orderDetailData.pick_lon,self.orderDetailData.pick_lat],
                        //             content: `<div><p><span class="weight">DDID：</span>
                        //                     ${self.orderDetailData['current_lat']},${self.orderDetailData['express_number']}</p>
                        //                     <p><span class="weight">发件：</span>${self.orderDetailData['pick_name']},
                        //                     ${self.orderDetailData['pick_phone']},${self.orderDetailData['pick_address']}</p>
                        //
                        //                     <p><span class="weight">收件：</span>${self.orderDetailData['delivery_name']},
                        //                     ${self.orderDetailData['delivery_phone']},${self.orderDetailData['delivery_address']}</p>
                        //                     <p><span class="weight">状态：</span>${self.orderDetailData['dispatch_status_link']}</p>
                        //                     <p>${self.orderDetailData['updated_at']}</p></div>`,
                        //             visible: true,
                        //             events: {
                        //                 close() {
                        //                     self.windows[0].visible = false
                        //                 }
                        //             }
                        //         }]
                        //     }}
                    },
                    {
                        position:[self.orderDetailData.delivery_lon,self.orderDetailData.delivery_lat],
                        name: self.orderDetailData.delivery_address,
                        type: 'collect',    //收
                        // events: {
                        //     click() {
                        //         self.windows = [];
                        //         self.windows = [{
                        //             position: [self.orderDetailData.delivery_lon,self.orderDetailData.delivery_lat],
                        //             content: `<div><p><span class="weight">DDID：</span>
                        //                     ${self.orderDetailData['current_lat']},${self.orderDetailData['express_number']}</p>
                        //                     <p><span class="weight">发件：</span>${self.orderDetailData['pick_name']},
                        //                     ${self.orderDetailData['pick_phone']},${self.orderDetailData['pick_address']}</p>
                        //
                        //                     <p><span class="weight">收件：</span>${self.orderDetailData['delivery_name']},
                        //                     ${self.orderDetailData['delivery_phone']},${self.orderDetailData['delivery_address']}</p>
                        //                     <p><span class="weight">状态：</span>${self.orderDetailData['dispatch_status_link']}</p>
                        //                     <p>${self.orderDetailData['updated_at']}</p></div>`,
                        //             visible: true,
                        //             events: {
                        //                 close() {
                        //                     self.windows[0].visible = false
                        //                 }
                        //             }
                        //         }]
                        //     }}
                    }
                ]
            }
        },
        watch: {
            markers: function (newValue, oldValue) {
                this.marker = newValue;
                this.polylines = [];
                this.windows = [];
                if (newValue && newValue.length > 0) {
                    let line = [];
                    this.mapCenter = newValue[1].position;
                    this.zoom = 12;
                    this.marker = newValue;
                    if (newValue.length < 2) {
                        console.info('数据收件，发件经纬度不齐');
                        return;
                    } else if (newValue && newValue.length == 2) {
                        this.setDrivingPanel([newValue[0].position[0],newValue[0].position[1]],[newValue[1].position[0],newValue[1].position[1]]);
                    } else if (newValue && newValue.length > 2) {
                        let points = [];
                        for (let i = 2;i < newValue.length; i++) {
                            points.push({lon:newValue[i].position[0],lat:newValue[i].position[1]});
                        }
                        this.setDrivingPanel([newValue[0].position[0],newValue[0].position[1]],[newValue[1].position[0],newValue[1].position[1]],points);
                    }
                    this.windows = [
                        {
                            position: [this.orderDetailData.delivery_lon,this.orderDetailData.delivery_lat],
                            content: `<div><p><span class="weight">DDID：</span>
                                            ${this.orderDetailData['current_lat']},${this.orderDetailData['express_number']}</p>
                                            <p><span class="weight">发件：</span>${this.orderDetailData['pick_name']},
                                            ${this.orderDetailData['pick_phone']},${this.orderDetailData['pick_address']}</p>

                                            <p><span class="weight">收件：</span>${this.orderDetailData['delivery_name']},
                                            ${this.orderDetailData['delivery_phone']},${this.orderDetailData['delivery_address']}</p>
                                            <p><span class="weight">状态：</span>${this.orderDetailData['dispatch_status_link']}</p>
                                            <p>${this.orderDetailData['updated_at']}</p></div>`,
                            visible: true
                        }
                    ]
                    // newValue.forEach(item => {
                        //     let marker = {
                        //         position: [item.position[0],item.position[1]]
                        //
                        //     };
                        //     line.push(marker.position)
                        // });
                        //
                        // let lines = {
                        //     path: line
                        // };
                        // this.polylines.push(lines)
                    // })
                }
            }
        },
        created() {

        },
        methods: {
            setDrivingPanel(start,end,center) {   // center格式[[ ][ ]]
                let self = this;
                AMap.plugin('AMap.Driving', function() {
                    self.driverGuiJi = new AMap.Driving({
                        map: amapManager.getMap(),
                        hideMarkers: true,
                        autoFitView: false,
                        policy: AMap.DrivingPolicy.LEAST_TIME
                    });
                    let waypoints = [];  // 途经点
                    if (center && center.length > 0) {
                        center.forEach(item => {
                            waypoints.push(new AMap.LngLat(item.lon,item.lat))
                        })
                    }
                    self.driverGuiJi.search(new AMap.LngLat(start[0], start[1]), new AMap.LngLat(end[0], end[1]),{waypoints:waypoints}, function (status, result) {
                        if (status === 'complete') {
                            // self.$message.success('绘制驾车路线完成')
                        } else {
                            self.$message.error('获取驾车数据失败：' + result)
                        }
                    });
                });
            },
        }
    };
</script>
<style lang="less">
    .express-address-map{
        .amap-page-container {
            width: 100%;
            height: 250px;
            position: relative;
            padding-bottom: 0px;
            .amap-info-close{
                display: none;
            }
            .search-box {
                position: absolute;
                top: 20px;
                left: 80px;
            }
            .express-name{
                font-size: 12px;
                /*width: 250px;*/
                white-space: nowrap;
                color: #000;
                text-align: center;
                position: absolute;
                z-index: 99;
                left: -50%;
                padding: 5px;
                border-radius: 4px;
                background-color: rgba(255,255,255);
                top: -18px;
            }
            .icon-img{
                width: 20px;
                height: 20px;
                position: relative;
                top: 20px;
                left: -10px;
            }
            .amap-labels{
                height: 250px;
            }
        }
    }


</style>


